import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import './index.scss'
import request from '../../comment/request/request'
//燃气站详情页面
var spList = []
import { AtSegmentedControl, AtButton, AtAvatar, AtSearchBar, AtTag, AtTabBar, AtRate, AtIcon, AtTabs, AtTabsPane, AtBadge, AtFloatLayout, AtInputNumber, AtToast, AtList, AtListItem } from 'taro-ui'
export default class Index extends Component {

  config = {
    navigationBarTitleText: '详情',
    navigationBarBackgroundColor: '#6381F7',
    // navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'white'
  }

  constructor(props) {
    super(props)
    this.state = {
      value: '',
      juli: true,
      current: 0,
      isOpened: false,
      ongouby: false,
      AtBadge: null,
      alltotal: 0,
      current1: 0,
      goodsList: [],
      spArr: [

      ]
    }
  }
  handleClick1(value) {
    this.setState({
      current1: value
    })
  }
  componentWillMount() {
    console.log(this.$router.params)
    this.getGoodsList(this.$router.params.id)
  }

  componentDidMount() { }

  componentWillUnmount() { }

  //获取商品列表
  getGoodsList = (id) => {
    request._get(`/zhrq-web/gas/order/getGoodsList?gasStationId=${id}`).then(res => {
      console.log(res, 49)
      if (res.rc === 0) {
        for (var i = 0; i < this.state.spArr.length; i++) {

          res.ret.forEach((item) => {
            //  console.log(item.goodsName,this.state.spArr[i],73)
            if (item.goodsName == this.state.spArr[i].name) {
              this.state.spArr[i].id = item.id
            }
          })
        }




        this.setState({
          goodsList: res.ret,
          spArr: this.state.spArr
        })
      }
    }).catch(e => {
      console.log(e)
    })
  }

  onAtSearchBar = () => {

  }

  onActionClick = () => {

  }
  onAtTag = () => {
    this.setState({
      juli: !this.state.juli
    })
  }


  handleClose = () => {
    console.log("关闭")
    this.setState({
      isOpened: false
    })

  }

  onBgou = () => {
    this.setState({
      isOpened: true
    })
  }

  onhandleChange = (name, price, num) => {
    console.log(num, name, price, 105)

    this.state.spArr.forEach((item) => {

      if (item.name == name) {
        item.num = Number(num)
      }
    })
    this.onAtIcon(price, name, Number(num), 'true')

    var all = 0
    var AtBadgeall = 0
    this.state.spArr.forEach((item) => {
      all += item.num * item.price
      AtBadgeall += item.num
    })

    setTimeout(() => {
      console.log(all, 121)
      this.setState({
        alltotal: all,
        spArr: this.state.spArr,
        AtBadge: AtBadgeall
      })
    }, 300);






  }

  gouby = () => {

    if (this.state.alltotal < 50) {

      return
    }
    let orderGoodsListArr = []



    this.state.spArr.forEach((item) => {
      if (item.num > 0) {
        orderGoodsListArr.push({
          goods: {
            price:item.price,
            goodsName:item.name,
            id: item.id,
            
          },
         num:item.num
        })
      }

    })



    let data = {
      consignee: '张晓红',
      gasStation: {
        id: this.$router.params.id
      },
      orderGoodsList: orderGoodsListArr,
      owerPhone: "15188884545",
      receivingAddress: "武汉市青山区青和居",
      status: 1,
      telephone: "15188884545",
      alltotal:this.state.alltotal

    }
    // setTimeout(() => {
    //   console.log(data, 188)
   
    // }, 300)


    Taro.setStorage({ key: 'spList', data })
    .then(res => {
      Taro.navigateTo({
        url: `../index.2/index`
      })
    })

   





  }

  onAtIcon = (price, goodsName, num, flag, id) => {


    console.log(price, goodsName, num, flag, id)




    console.log(result, 223)

    if (flag !== 'true') {

      if (spList.length > 0) {
        console.log(251)
        for (var i = 0; i < spList.length; i++) {
          console.log(spList[i].name, goodsName)
          if (spList[i].name === goodsName) {
            spList[i].num = spList[i].num + 1
          } else {

          }
        }
      } else {
        spList.push({
          name: goodsName,
          price: price,
          num: num,
          id: id
        })
      }
      spList.push({
        name: goodsName,
        price: price,
        num: num,
        id: id
      })

      var result = []
      var obj = {}
      for (var i = 0; i < spList.length; i++) {
        if (!obj[spList[i].id]) {
          result.push(spList[i]);
          obj[spList[i].id] = true;
        }
      }


      this.setState({
        AtBadge: this.state.AtBadge + 1
      })
      this.state.spArr.forEach(item => {

        if (item.name == goodsName) {
          item.num = item.num + 1
        }

      });
    }

    setTimeout(() => {
      this.setState({
        alltotal: this.state.alltotal + price,
        spArr: result
      })
    }, 300)


  }

  //tab切换
  onAtTabshandleClick = (val) => {
    console.log(val)
    this.setState({
      current: val
    })
  }



  render() {
    const tabList = [{ title: '订购' }, { title: '评价' }, { title: '商家' }]
    var height
    wx.getSystemInfo({
      success: function (res) {
        console.log(res)
        height = res.screenHeight - 115 + 'px'
      }
    })
    return (
      <View className='index'>


        <View className='list'>
          <map id="myMap"
            style="width:100%;height:100%;"
            longitude="116.313972"
            latitude="39.980014" scale='16'>
          </map>

          <View className='list_item'>
            <View className='item_L'>
              <Image
                className='Image'
                src='https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1759133402,2696021330&fm=26&gp=0.jpg'
              />
            </View>
            <View className='item_R'>
              <View className='item_t'>
                <View className='rqz'>
                  <Text>#1燃气站</Text>
                </View>
                <View className='juli'>
                  <Text style={{ fontSize: '12px', padding: '10px' }}>3.5km</Text>
                </View>
              </View>
              <View className='item_m'>

                <View>
                  <AtRate
                    value={3}
                    size='12'
                  />

                </View>
                <View>
                  <Text style={{ fontSize: '12px', margin: "0px 10px" }}>3评分</Text><Text style={{ fontSize: '12px', margin: "0px 10px" }}>月售1334</Text>
                </View>



              </View>
              <View className='item_b'>
                <AtIcon value='map-pin' size='15' ></AtIcon><Text style={{ fontSize: '12px', margin: "0px 10px" }}>武汉市武昌区XX路</Text>
              </View>
            </View>
          </View>


        </View>

        <AtTabs current={this.state.current} tabList={tabList} onClick={this.onAtTabshandleClick.bind(this)}>
          <AtTabsPane current={0} index={0} className='AtTabsPane'>
            <View className='AtTabs'>
              {
                this.state.goodsList &&
                this.state.goodsList.map((item, index) => {
                  return (
                    <View className='list_item'>
                      <View className='item_L'>
                        <Image
                          className='Image'
                          src='https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1759133402,2696021330&fm=26&gp=0.jpg'
                        />
                      </View>
                      <View className='item_R'>

                        <View className='item_m'>
                          <View>
                            <Text>{item.goodsName}</Text>
                          </View>



                        </View>
                        <View className='item_b'>
                          <Text style={{ fontSize: '12px', color: "#999999" }}>月售 {item.total}</Text>
                        </View>
                        <View className='item_t'>
                          <View className='rqz'>
                            <Text style={{ color: "red" }}>¥ {item.price}</Text>
                          </View>
                          <View className='juli'>
                            {/* <AtBadge value={this.state.} maxValue={99}> */}
                            <AtIcon value='add-circle' size='30' color='#5095F3' onClick={this.onAtIcon.bind(this, item.price, item.goodsName, 1, 'flag', item.id)}></AtIcon>
                            {/* </AtBadge> */}
                          </View>
                        </View>
                      </View>
                    </View>
                  )
                })
              }

            </View>
          </AtTabsPane>
          <AtTabsPane current={1} index={1} className='AtTabsPane'>
            <View className='pjtop'>
              <View className='pjtop_L'>
                <Text style={{ color: "orange" }}>4.7</Text>
                <Text style={{ fontSize: "12px" }}>商家评分</Text>
              </View>
              <View className='pjtop_M'>
                <View className='pjtop_M_item'><Text style={{ fontSize: "12px" }}>速度</Text><AtRate
                  value={5}
                  size='10'
                  onChange={this.handleChange.bind(this)}
                /></View>
                <View className='pjtop_M_item'><Text style={{ fontSize: "12px" }}>态度</Text><AtRate
                  value={5}
                  size='10'
                  onChange={this.handleChange.bind(this)}
                /></View>
              </View>
              <View className='pjtop_R'>
                <Text style={{ color: "#ccc" }}>98%</Text>
                <Text style={{ fontSize: "12px", color: "#ccc" }}>配送满意度</Text>
              </View>
            </View>

            <AtSegmentedControl
              values={['全部', '有图']}
              selectedColor='orange'
              fontSize='30'
              onClick={this.handleClick1.bind(this)}
              current={this.state.current1}
            />
            {
              this.state.current1 === 0
                ? <View className='content'>
                  <View className='content_top'>
                    <AtTag active className='AtTag'>全部</AtTag>
                    <AtTag active className='AtTag'>好评</AtTag>
                    <AtTag active className='AtTag'>差评</AtTag>
                    <AtTag active className='AtTag'>配送快</AtTag>
                    <AtTag active className='AtTag'>服务好</AtTag>
                  </View>
                  <View className='contentItem'>
                    <View className='contentItem_L'>
                      <AtAvatar size='small' circle image='http://storage.360buyimg.com/mtd/home/32443566_635798770100444_2113947400891531264_n1533825816008.jpg'></AtAvatar>
                    </View>
                    <View className='contentItem_R'>
                      <View className='contentItem_R_item contentItem_R_item_top'>
                        <Text style={{ fontSize: '12px' }}>xel2wt</Text><Text style={{ fontSize: '12px', color: "#ccc" }}>2019.02.13</Text>
                      </View>
                      <View className='contentItem_R_item contentItem_R_item_mo' >
                        <Text style={{ fontSize: '12px', color: "#ccc" }}>评分</Text><AtRate
                          value={5}
                          size='10'
                          onChange={this.handleChange.bind(this)}
                        />
                      </View>
                      <View className='contentItem_R_item'>
                        <Text style={{ fontSize: '12px' }}>配送很快,服务也很好</Text>
                      </View>
                      <View className='contentItem_R_item'>
                        <AtTag active className='AtTag' size='small'>11.6kg钢瓶</AtTag>
                      </View>
                      <View className='contentItem_R_item'>
                        <Text style={{ backgroundColor: "rgb(230, 225, 225)", fontSize: '12px' }}>商家回复:新年好,谢谢好评</Text>
                      </View>

                    </View>
                  </View>
                </View>
                : null
            }
            {
              this.state.current1 === 1
                ? <View className='content'>标签2的内容</View>
                : null
            }




          </AtTabsPane>
          <AtTabsPane current={2} index={2} className='AtTabsPane'>
            <View >
              <AtList>
                <AtListItem
                  title='青宜居小区旁XXX'
                  arrow='right'
                  thumb='https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'
                />
                <AtListItem
                  title='查看站点证书'
                  note='描述信息'
                  arrow='right'
                  thumb='http://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'
                />
                <AtListItem
                  title='配送服务'
                  note='描述信息'
                  extraText='详细信息'
                  arrow='right'
                  thumb='http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png'
                />
                <AtListItem
                  title='配送时间'
                  note='描述信息'
                  arrow='right'
                  thumb='http://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'
                />
              </AtList>
            </View>
          </AtTabsPane>
        </AtTabs>






        <View className='Bgou' style={{ top: height }} onClick={this.onBgou}>
          <View className='bgou_l'>
            <View className='blc'>
              <AtBadge value={this.state.AtBadge} maxValue={99}>
                <AtIcon value='shopping-cart' size='30' color='#FFFFFF'></AtIcon>
              </AtBadge>
            </View>
          </View>
          <View className='bgou_m'>
            {
              this.state.AtBadge &&
              <Text style={{ color: "red" }}>¥ {this.state.alltotal}</Text>
            }
            {
              !this.state.AtBadge &&
              <Text style={{ color: "#ccc", fontSize: "12px" }}>您的购物车空空如也~</Text>
            }

          </View>
          <View className='bgou_r' onClick={this.gouby} style={{ backgroundColor: this.state.AtBadge ? '#858AF4' : '#ccc' }}>
            <Text style={{ color: "#fff" }}>去结算</Text>
          </View>


        </View>

        <AtFloatLayout isOpened={this.state.isOpened} onClose={this.handleClose} >
          <View className='goubox'>
            <View><Text>购物车</Text><Text>(共{this.state.AtBadge ? this.state.AtBadge : 0}件商品)</Text></View>
            <View  ><AtIcon value='trash' ></AtIcon><Text>清空购物车</Text></View>
          </View>
          <View className='AtFloatLayout'>
            {
              this.state.spArr &&
              this.state.spArr.map((item) => {
                return (
                  <View className='list_item'>
                    <View className='item_L'>
                      <Image
                        className='Image'
                        src='https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1759133402,2696021330&fm=26&gp=0.jpg'
                      />
                    </View>
                    <View className='item_R'>

                      <View className='item_m'>
                        <View>
                          <Text>{item.name}</Text>
                        </View>
                      </View>

                      <View className='item_t'>
                        <View className='rqz'>
                          <Text style={{ color: "red" }}>¥ {item.price}</Text>
                        </View>
                        <View className='juli'>
                          <AtInputNumber

                            step={1}
                            value={item.num}
                            onChange={this.onhandleChange.bind(this, item.name, item.price)}
                          />
                        </View>
                      </View>
                    </View>
                  </View>
                )
              })
            }
          </View>


        </AtFloatLayout>

      </View>
    )
  }
}

